import React, {useState, useEffect, useRef} from "react";
import classNames from "classnames";
import * as styles from './index.less';


function PrintText(props) {
    const [text, setText] = useState('');
    const timeRef = useRef(null);
    const textIndex = useRef(0);

    useEffect(() => {
      let str = props.text || '你好！世界';
      let PrintText = ''
      timeRef.current = setInterval(() => {
        PrintText += str.split('')[textIndex.current]
        setText(PrintText);
        textIndex.current += 1
        if (str.length === PrintText.length) {
            clearInterval(timeRef.current);
            textIndex.current = 0
        }
      }, 100);
    }, [props.text])

    let animationName = styles['print_icon_animation']
    return <div className={"content print_content"}>
        <span className={"text"}>{text}<span className={styles.print_icon} style={{animationName: animationName}}>_</span></span>
    </div>
}
export default PrintText